<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>表格</title>
    <meta name="keywords" content="侧边导航菜单(可分组折叠)">
    <meta name="description" content="侧边导航菜单(可分组折叠)" />
    <meta name="HandheldFriendly" content="True" />
	<title>Insert title here</title>
	<%
		pageContext.setAttribute("ctp",request.getContextPath());
	%>
	<link rel="stylesheet" href="${ctp}/support/bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<script src="${ctp}/support/jquery.js"></script>
	<script type="text/javascript" src="${ctp}/support/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<style>
	    .panel-group{max-height:770px;overflow: auto;}
	    .leftMenu{margin:10px;margin-top:5px;}
	    .leftMenu .panel-heading{font-size:14px;padding-left:20px;height:36px;line-height:36px;color:white;position:relative;cursor:pointer;}/*转成手形图标*/
	    .leftMenu .panel-heading span{position:absolute;right:10px;top:12px;}
	    .leftMenu .menu-item-left{padding: 2px; background: transparent; border:1px solid transparent;border-radius: 6px;}
	    .leftMenu .menu-item-left:hover{background:#C4E3F3;border:1px solid #1E90FF;}
    </style>
</head>
<body>
        <div class="panel-group table-responsive" role="tablist">
            <div class="panel panel-primary leftMenu">
                <!-- 利用data-target指定要折叠的分组列表 -->
                <div class="panel-heading" id="collapseListGroupHeading1" data-toggle="collapse" data-target="#collapseListGroup1" role="tab" >
                    <h4 class="panel-title">
                      		  分组1
                        <span class="glyphicon glyphicon-chevron-up right"></span>
                    </h4>
                </div>
                <!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
                <div id="collapseListGroup1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="collapseListGroupHeading1">
                    <ul class="list-group">
                      <li class="list-group-item">
                        <!-- 利用data-target指定URL -->
                        <button class="menu-item-left" data-target="test2.html">
                            <span class="glyphicon glyphicon-triangle-right"></span>分组项1-1
                        </button>
                      </li>
                      <li class="list-group-item">
                        <button class="menu-item-left">
                            <span class="glyphicon glyphicon-triangle-right"></span>分组项1-2
                        </button>
                      </li>
                      <li class="list-group-item">
                        <button class="menu-item-left">
                            <span class="glyphicon glyphicon-triangle-right"></span>分组项1-3
                        </button>
                      </li>
                      <li class="list-group-item">
                        <button class="menu-item-left">
                            <span class="glyphicon glyphicon-triangle-right"></span>分组项1-4
                        </button>
                      </li>
                      <li class="list-group-item">
                        <button class="menu-item-left">
                            <span class="glyphicon glyphicon-triangle-right"></span>分组项1-5
                        </button>
                      </li>
                      <li class="list-group-item">
                        <button class="menu-item-left">
                            <span class="glyphicon glyphicon-triangle-right"></span>分组项1-6
                        </button>
                      </li>
                      <li class="list-group-item">
                        <button class="menu-item-left">
                            <span class="glyphicon glyphicon-triangle-right"></span>分组项1-7
                        </button>
                      </li>
                      <li class="list-group-item">
                        <button class="menu-item-left">
                            <span class="glyphicon glyphicon-triangle-right"></span>分组项1-8
                        </button>
                      </li>
                      <li class="list-group-item">
                        <button class="menu-item-left">
                            <span class="glyphicon glyphicon-triangle-right"></span>分组项1-9
                        </button>
                      </li>
                      <li class="list-group-item">
                        <button class="menu-item-left">
                            <span class="glyphicon glyphicon-triangle-right"></span>分组项1-10
                        </button>
                      </li>
                      <li class="list-group-item">
                        <button class="menu-item-left">
                            <span class="glyphicon glyphicon-triangle-right"></span>分组项1-11
                        </button>
                      </li>
                    </ul>
                </div>
            </div><!--panel end-->
            <div class="panel panel-primary leftMenu">
                <div class="panel-heading" id="collapseListGroupHeading2" data-toggle="collapse" data-target="#collapseListGroup2" role="tab" >
                    <h4 class="panel-title">
                        			分组2
                        <span class="glyphicon glyphicon-chevron-down right"></span>
                    </h4>
                </div>
                <div id="collapseListGroup2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading2">
                    <ul class="list-group">
                      <li class="list-group-item">
                        <button class="menu-item-left">
                            <span class="glyphicon glyphicon-triangle-right"></span>分组项2-1
                        </button>
                      </li>
                      <li class="list-group-item">
                        <button class="menu-item-left">
                            <span class="glyphicon glyphicon-triangle-right"></span>分组项2-2
                        </button>
                      </li>
                      <li class="list-group-item">
                        <button class="menu-item-left">
                            <span class="glyphicon glyphicon-triangle-right"></span>分组项2-3
                        </button>
                      </li>
                      <li class="list-group-item">
                        <button class="menu-item-left">
                            <span class="glyphicon glyphicon-triangle-right"></span>分组项2-4
                        </button>
                      </li>
                    </ul>
                </div>
            </div>  
        </div>
        <!-- jQuery1.11.3 (necessary for Bo otstrap's JavaScript plugins) -->
        <script src="js/jquery-1.11.3.min.js "></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js "></script>
        <script>
        $(function(){
            $(".panel-heading").click(function(e){
                /*切换折叠指示图标*/
                $(this).find("span").toggleClass("glyphicon-chevron-down");
                $(this).find("span").toggleClass("glyphicon-chevron-up");
            });
        });
        </script>
</body>
</html>